<template>
    <!-- <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs> -->
    <div class="r-page">
        <Baner v-if="!user.isLogin"></Baner>
        <div class="r-all">
            <div class="b-title c-title-2" style="font-weight: bolder">
                <!-- 尝试我们的任何付费方案-免费7天 -->
                {{ $t("message.Plan.a") }}
            </div>
            <div class="b-nav justify-center">
                <!-- <div class="b-tip c-title-4">选择方案</div> -->
                <div class="n-btns">
                    <div class="n-btn c-title-5" :class="{ choose: i == curIndex }" v-for="(item, i) in navs" :key="item.title" @click="onChangeNav(i)">{{ item.title }}</div>
                </div>
            </div>
            <div class="b-tal" v-if="curItem">
                <div class="b-row" style="border: none">
                    <div class="b-col c-t1"></div>
                    <div class="b-col c-title-3 mr-10">
                        <!-- 基础版 -->
                        {{ $t("message.Plan.b") }}
                    </div>
                    <div class="b-col c-title-3">
                        <!-- VIP版 -->
                        {{ $t("message.Plan.c") }}
                    </div>
                </div>
                <div class="b-row no-line">
                    <div class="b-col c-t1"></div>
                    <div class="b-col align-baseline">
                        <span class="b-title-sub" style="">0</span>
                        <span class="c-t1-sub" style="text-wrap: nowrap">
                            <!-- /每月 -->
                            {{ $t("message.Plan.d") }}
                        </span>
                    </div>
                    <div class="b-col align-baseline">
                        <!-- <span class="b-no">170 </span> -->
                        <span class="b-title-sub" style=""
                            >
                            <JEnergy :num="curItem.price"></JEnergy>
                            <!-- {{ curItem.price }} -->
                            <!-- 能量 -->
                            {{ $t("message.Plan.e") }}
                        </span>
                        <span class="c-t1-sub" style="text-wrap:">
                            <!-- /每月 -->
                            {{ $t("message.Plan.d") }}
                        </span>
                    </div>
                </div>
                <div class="b-row no-line b-btns">
                    <div class="b-col c-t1"></div>
                    <div class="b-col">
                        <v-btn class="b-btn" color="primary">
                            <!-- 基础版免费 -->
                            {{ $t("message.Plan.table.a") }}
                        </v-btn>
                    </div>
                    <div class="b-col">
                        <v-btn class="b-btn" color="primary" @click="onSubVip">
                            <!-- 立即订阅 -->
                            {{ $t("message.Plan.table.b") }}
                        </v-btn>
                    </div>
                </div>
                <div class="b-row">
                    <div class="b-col c-t1">
                        <!-- 图表指标 -->
                        {{ $t("message.Plan.table.c") }}
                    </div>
                    <div class="b-col">1</div>
                    <div class="b-col c-main">
                        <!-- 无限 -->
                        {{ $t("message.Plan.g") }}
                    </div>
                </div>
                <div class="b-row">
                    <div class="b-col c-t1">
                        <!-- 活动价格警报 -->
                        {{ $t("message.Plan.table.d") }}
                    </div>
                    <div class="b-col">1</div>
                    <div class="b-col c-main">
                        <!-- 无限 -->
                        {{ $t("message.Plan.g") }}
                    </div>
                </div>
                <div class="b-row">
                    <div class="b-col c-t1">
                        <!-- 成交量分布指标 -->
                        {{ $t("message.Plan.table.e") }}
                    </div>
                    <div class="b-col">1</div>
                    <div class="b-col c-main">
                        <!-- 无限 -->
                        {{ $t("message.Plan.g") }}
                    </div>
                </div>
                <div class="b-row">
                    <div class="b-col c-t1">
                        <!-- 活跃资讯 -->
                        {{ $t("message.Plan.table.f") }}
                    </div>
                    <div class="b-col">1</div>
                    <div class="b-col c-main">
                        <!-- 无限 -->
                        {{ $t("message.Plan.g") }}
                    </div>
                </div>
                <div class="b-row">
                    <div class="b-col c-t1">
                        <!-- 成交历史记录 -->
                        {{ $t("message.Plan.table.g") }}
                    </div>
                    <div class="b-col">
                        <div class="wrong"></div>
                    </div>
                    <div class="b-col">
                        <div class="right"></div>
                    </div>
                </div>
                <div class="b-row">
                    <div class="b-col c-t1">
                        <!-- 钱包大额转账 -->
                        {{ $t("message.Plan.table.h") }}
                    </div>
                    <div class="b-col">
                        <div class="wrong"></div>
                    </div>
                    <div class="b-col">
                        <div class="right"></div>
                    </div>
                </div>

                <div class="b-row" v-for="i in curItem.channels">
                    <div class="b-col c-t1">
                        {{ i.name }} - {{ i.days }}
                        <!-- 天 -->
                        {{ $t("message.Plan.f") }}
                    </div>
                    <div class="b-col">
                        <div class="wrong"></div>
                    </div>
                    <div class="b-col">
                        <div class="right"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useUser } from "@/stores/user";
import Baner from "./baner/index.vue";
import { toast } from "@/components/toast/toast";
import JEnergy from "@/components/j-energy/index.vue"
import i18n from "@/locals";

const user = useUser();

// const list = ref<any>([
//     {
//         title: '7天'
//     },
//     {
//         title: '1個月'
//     },
//     {
//         title: '3個月'
//     },
//     {
//         title: '1年'
//     }
// ])
onMounted(() => {
    user.getVipList();
    // toast(i18n.global.t("message.Plan.m"));
});

const curIndex = ref(0);
const navs = computed(() => {
    return user.vipList.map(i => {
        return { title: i.name };
    });
});

const curItem = computed(() => {
    return user.vipList[curIndex.value];
});

const onChangeNav = (item: any) => {
    // curItem.value = item;
    curIndex.value = item;
};
const items = ref([
    {
        // title: "主頁",
        title: i18n.global.t("message.Global.Home"),
        disabled: false,
        href: "/"
    },
    {
        // title: "方案",
        title: i18n.global.t("message.Global.child.c"),
        disabled: true,
        href: ""
    }
]);

const onSubVip = async () => {
    console.log("curItem.value", curItem.value);
    if (curItem.value.price > user.info.energy) {
        // toast("余额不足")
        toast(i18n.global.t("message.Plan.h"));
        return;
    }
    let res = await user.addVip({
        vipId: curItem.value.id,
        days: curItem.value.channels[0].days
        // userId: 0,
    });

    if (res) {
        toast(res);
    } else {
        // toast("订阅成功")
        // toast(i18n.global.t("message.Plan.m"));
    }
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
